<template>
	<view class="box">
	<form @submit="formSubmit">
		<view class="hutou">
			<view class="warpkuang">
				<view class="hu">户头:</view>
				<input class="shu"  type="text"  v-model="account" />
			</view>
		</view>
        <view class="hutou">
        	<view class="warpkuang">
        		<view class="hu">税号:</view>
        		<input class="shu"  type="text"  v-model="tfn"/>
        	</view>
        </view>
		<view class="hutou">
			<view class="warpkuang">
				<view class="hu hutou">单位地址:</view>
				<input class="shu siwei"  type="text"  v-model="unitAddress"/>
			</view>
		</view>
		<view class="hutou">
			<view class="warpkuang">
				<view class="hu hutou">电话号码:</view>
				<input class="shu siwei"  type="text"  v-model="phoneNumber"/>
			</view>
		</view>
		<view class="hutou">
			<view class="warpkuang">
				<view class="hu hutou">开户银行:</view>
				<input class="shu siwei"  type="text"  v-model="bankOfDeposit"/>
			</view>
		</view>
		<view class="hutou">
			<view class="warpkuang">
				<view class="hu hutou">银行信息:</view>
				<input class="shu siwei"  type="text"  v-model="bankInformation"/>
			</view>
		</view>
		<view class="hutou">
			<view class="warpkuang">
				<view class="hu hutou">开票金额:</view>
				<input class="shu siwei"  type="text"  v-model="invoiceAmount"/>
			</view>
		</view>
		<view>
		<button class="tijiao"  form-type="submit" >提交</button>
		</view>
	</form>
		
		
		
</view>
</template>

<script>
	
	export default{
		data(){
			return{
				userId:'12321312312313',
				account:'',
				tfn:'',
				phoneNumber:'',
				bankOfDeposit:'',
				bankInformation:'',
				unitAddress:'',
				invoiceAmount:'',
			}
		},
		methods:{
			formSubmit(e){
				console.log(e)
				uni.request({
					url: 'https://www.zunyishengshui.com/maishui/user/insertInvoice', 
					method:'POST',
					data: {
				      userId:this.userId,
					  account:this.account,
					  tfn:this.tfn,
					  phoneNumber:this.phoneNumber,
					  bankOfDeposit:this.bankOfDeposit,
					  bankInformation:this.bankInformation,
					  unitAddress:this.unitAddress,
					  invoiceAmount:this.invoiceAmount	
					},
					header:{
					     'Content-Type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res);
						this.address = res.data.data;
						this.text = 'request success';
					}
				})	
			}
		},
		mounted () {
			
			
			
			
			},
			
		
	}		
			
			

		
		
		
		
		
	
	
	
	
	
	
</script>

<style>
	.box{
		display: flex;
		flex-direction: column;
		width:100%;
		height: 1056upx;
		margin: 22upx 20upx 26upx 20upx;
	}
	.hutou{
		width: 100%;
		height: 90upx;
		border-bottom: 2upx solid #EEEEEE;
	}  
	.hu{
		float: left;
		line-height: 92upx;
		margin-left: 92upx;
	}
	.shu{
		float: left;
		position: absolute;
		top: 20upx;
		left: 180upx;
	}
	.warpkuang{
		position: relative;
	}
	.siwei{
		position: absolute;
		left: 250upx;
		top: 20upx;
	}
	.tijiao{
		width: 660upx;
		height: 100upx;
		position: fixed;
		bottom: 100upx;
		left: 40upx;
		background: #3B9CDB;
		color: #FFFFFF;
		font-size: 14px;
		line-height: 100upx;
	}
	.hutou{
		margin-left: 40upx;
	}
	
	
	
	
	
	
</style>
